<template>
    <div class="mr-root">
        <home-list v-for="list in homeList" :h="list"></home-list>
        <router-view></router-view>
        <div class="loadMore"  v-if="!showLoading"><span class="load" @click="loadMore">点击加载更多</span></div>
        </div>
</template>
<script>
    import HomeList from './HomeList'
     export default{
         data(){
             return{
                 homeList:[],
                 count:1,
                 showLoading: true
             }
         },
        components:{
            HomeList
        },
         created() {
            this.getHomeList(this.count)
        }, 
        methods:{
            getHomeList(page){
                this.axios.get('http://www.vue-js.com/api/v1/topics?page='+ page)
                .then(data => {          
                    this.homeList = this.homeList.concat(data.data.data) 
                    setTimeout(() => {
                            this.showLoading = false
                        }, 2000)
                                  
                })
                .catch(err => {
                    console.log(err)
                    setTimeout(() => {
                            this.showLoading = false
                        }, 2000)
                })
            },
            loadMore(){
                this.count ++
                this.getHomeList(this.count)
            }
        }
    }
</script>
<style>
body{
    padding:35px 0 0 0; 
}
.loadMore {
        margin: 15px 0 49px 0;
        text-align: center;
    }
    
    .load {
    	   line-height: 30px;
        width: 2.5rem;
        display: inline-block;
        border: 1px solid #000;
        border-radius: 10px;
     
   
    }
    
</style>